<template>
  <div class="yunxingzhuangtai">
    <corner></corner>
    <home-title :title="zhuangtaiData.title"></home-title>
    <div class="container">
      <div class="chart-pie">
        <div class="chart-pie-item">
          <chart-pie :pieData="zhuangtaiData.pie"></chart-pie>
        </div>
      </div>
      <div class="content">
        <div class="content-inner">
          <chart-percent :percent="zhuangtaiData.percent1"></chart-percent>
          <chart-percent :percent="zhuangtaiData.percent2"></chart-percent>
          <div class="chart-bar">
            <div class="chart-bar-item">
              <chart-bar :chartData="zhuangtaiData.line"></chart-bar>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import HomeTitle from './Title'
import ChartPie from './ChartPie'
import ChartPercent from './ChartPercent'
import ChartBar from './ChartBar'
import Corner from './Corner'
export default {
  name: 'HomeYunxingZhuangtai',
  components: {
    HomeTitle,
    ChartPie,
    ChartPercent,
    ChartBar,
    Corner
  },
  props: {
    zhuangtaiData: Object
  }
}
</script>
<style lang="scss">
  .yunxingzhuangtai{
    display: flex;
    flex-direction: column;
    position: relative;
    width: 25%;
    height: 100%;
    .container{
      display: flex;
      flex-direction: column;
      flex-wrap: wrap;
      align-content: flex-start;
      flex: 1;
      .chart-pie{
        width: 100%;
        height: 50%;
        .chart-pie-item{
          width: 100%;
          height: 100%;
          padding: 0 5px 10px 5px;
        }
      }
      .content{
        width: 100%;
        height: 50%;
        .content-inner{
          display: flex;
          flex-direction: column;
          width: 100%;
          height: 100%;
          padding: 0 5px 10px 5px;
          .chart-bar{
            flex: 1;
            width: 100%;
            height: 25%;
            .chart-bar-item{
              width: 100%;
              height: 100%;
            }
          }
        }
      }
    }
  }
</style>